<template>
  <view class="container">
    <scroll-view class="main-content" scroll-y>
      <!-- 反馈表单 -->
      <view class="input-section">
        <text class="section-title">反馈内容</text>
        <textarea class="feedback-input" v-model="feedbackContent" placeholder="请输入您的意见或建议" maxlength="200" />
      </view>
      <!-- <view class="input-section">
        <text class="section-title">联系方式（可选）</text>
        <input class="contact-input" v-model="contactInfo" placeholder="联系方式（选填）" maxlength="50" />
      </view> -->
      <button class="generate-btn cursor-pointer" @click="submitFeedback" :disabled="!feedbackContent.trim()">提交反馈</button>
      <button class="clear-btn cursor-pointer" @click="clearFeedbacks" v-if="feedbackList.length > 0">清空全部反馈</button>
      <!-- 反馈列表 -->
      <view v-if="feedbackList.length > 0" class="names-display">
        <text class="section-title">我的反馈记录</text>
        <view class="names-grid">
          <view v-for="item in feedbackList" :key="item.id" class="name-card">
            <view class="name-content">
              <text class="full-name">{{ item.content }}</text>
              <text class="name-meaning">{{ item.contact ? '联系方式：' + item.contact : '未留联系方式' }}</text>
            </view>
            <view class="name-actions">
              <uni-icons type="trash" size="20" color="#FF4757" class="cursor-pointer" @click="deleteFeedback(item.id)"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">
        <uni-icons type="document" size="60" color="#ccc"></uni-icons>
        <text class="empty-text">暂无反馈记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackContent: '',
      contactInfo: '',
      feedbackList: []
    }
  },
  methods: {
    loadFeedbacks() {
      const list = uni.getStorageSync('feedbackList') || []
      this.feedbackList = list
    },
    saveFeedbacks() {
      uni.setStorageSync('feedbackList', this.feedbackList)
    },
    submitFeedback() {
      if (!this.feedbackContent.trim()) return
      const newFeedback = {
        id: Date.now(),
        content: this.feedbackContent.trim(),
        contact: this.contactInfo.trim(),
        time: new Date().toLocaleString('zh-CN', { hour12: false })
      }
      this.feedbackList.unshift(newFeedback)
      this.saveFeedbacks()
      this.feedbackContent = ''
      this.contactInfo = ''
      uni.showToast({ title: '反馈已提交', icon: 'success' })
    },
    deleteFeedback(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条反馈吗？',
        success: (res) => {
          if (res.confirm) {
            this.feedbackList = this.feedbackList.filter(item => item.id !== id)
            this.saveFeedbacks()
          }
        }
      })
    },
    clearFeedbacks() {
      uni.showModal({
        title: '清空全部反馈',
        content: '确定要清空所有反馈记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.feedbackList = []
            this.saveFeedbacks()
          }
        }
      })
    }
  },
  mounted() {
    this.loadFeedbacks()
  }
}
</script>

<style>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}
.header {
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}
.main-content {
  flex: 1;
  min-height: 0;
  padding: 32rpx;
  width: 100%;
  box-sizing: border-box;
}
.input-section {
  margin-bottom: 48rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}
.feedback-input {
  width: 100%;
  min-height: 120rpx;
  background-color: #fff;
  border: 2px solid #e9ecef;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
}
.feedback-input:focus {
  border-color: #4A90E2;
}
.contact-input {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  border: 2px solid #e9ecef;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
}
.contact-input:focus {
  border-color: #4A90E2;
}
.generate-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  margin: 0 0 32rpx 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.generate-btn:disabled {
  background: #ccc;
}
.clear-btn {
  width: 100%;
  height: 80rpx;
  background: #fff;
  color: #FF4757;
  border: 2px solid #FF4757;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.names-display {
  margin-bottom: 32rpx;
}
.names-grid {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.name-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.name-content {
  flex: 1;
}
.full-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}
.name-meaning {
  font-size: 26rpx;
  color: #666;
  display: block;
}
.name-actions {
  display: flex;
  gap: 24rpx;
  align-items: center;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 24rpx;
}
.cursor-pointer {
  cursor: pointer;
}
</style>